 <template>
 	<view class="container">
 		<uni-forms :rules="rules" :model="formData" ref="form" validate-trigger="bind" err-show-type="undertext">
 			<uni-forms-item name="name" required label="单位名称">
 				<uni-easyinput type="text" :inputBorder="true" v-model="formData.name"
 					placeholder="请输入单位名称"></uni-easyinput>
 			</uni-forms-item>
 			<uni-forms-item name="address" required label="地址">
 				<uni-easyinput type="text" :inputBorder="true" v-model="formData.address"
 					placeholder="请输入地址"></uni-easyinput>
 			</uni-forms-item>
 			<uni-forms-item name="photo" required label="单位照片">
				<UploadImage :limit=1 :uploadedImages="clientPhotoList" :uploadUrl="this.$baseUrl+'/api/files/upload'">
				</UploadImage>
 			</uni-forms-item>
 			<uni-forms-item name="logo" label="单位logo">
 				<UploadImage :limit=1 :uploadedImages="logoList" :uploadUrl="this.$baseUrl+'/api/files/upload'">
 				</UploadImage>
 			</uni-forms-item>
 			<uni-forms-item name="pointMap" required label="点位图">
				<UploadImage :uploadedImages="pointMapList" :uploadUrl="this.$baseUrl+'/api/files/upload'">
				</UploadImage>
 			</uni-forms-item>
 			<uni-forms-item required label="单位状态">
 				<zxz-uni-data-select v-model="formData.state" :localdata="stateOptions">
 				</zxz-uni-data-select>
 			</uni-forms-item>
 			<uni-forms-item name="explanation" label="说明">
 				<uni-easyinput type="text" :inputBorder="true" v-model="formData.explanation"
 					placeholder="请输入说明"></uni-easyinput>
 			</uni-forms-item>
 			<uni-forms-item name="linkman" required label="联系人">
 				<uni-easyinput type="text" :inputBorder="true" v-model="formData.linkman"
 					placeholder="请输入联系人"></uni-easyinput>
 			</uni-forms-item>
 			<uni-forms-item name="teleLinkman" required label="联系人电话">
 				<uni-easyinput type="text" :inputBorder="true" v-model="formData.teleLinkman"
 					placeholder="请输入联系人电话"></uni-easyinput>
 			</uni-forms-item>
 			<uni-forms-item name="dispatcher" required label="接警人">
 				<uni-easyinput type="text" :inputBorder="true" v-model="formData.dispatcher"
 					placeholder="请输入接警人"></uni-easyinput>
 			</uni-forms-item>
 			<uni-forms-item name="teleDispatcher" required label="接警人电话">
 				<uni-easyinput type="text" :inputBorder="true" v-model="formData.teleDispatcher"
 					placeholder="请输入接警人电话"></uni-easyinput>
 			</uni-forms-item>
 			<uni-forms-item name="dispatchSupervisor" required label="接警领导">
 				<uni-easyinput type="text" :inputBorder="true" v-model="formData.dispatchSupervisor"
 					placeholder="请输入接警领导"></uni-easyinput>
 			</uni-forms-item>
 			<uni-forms-item name="teleDispatchSupervisor" required label="接警领导电话">
 				<uni-easyinput type="text" :inputBorder="true" v-model="formData.teleDispatchSupervisor"
 					placeholder="请输入接警领导电话"></uni-easyinput>
 			</uni-forms-item>
 			<uni-forms-item name="receptionist" required label="值班员">
 				<uni-easyinput type="text" :inputBorder="true" v-model="formData.receptionist"
 					placeholder="请输入值班员"></uni-easyinput>
 			</uni-forms-item>
 			<uni-forms-item name="teleReceptionist" required label="值班员电话">
 				<uni-easyinput type="text" :inputBorder="true" v-model="formData.teleReceptionist"
 					placeholder="请输入值班员电话"></uni-easyinput>
 			</uni-forms-item>
 			<uni-forms-item name="longitude" required label="经度">
 				<uni-easyinput type="text" :inputBorder="true" v-model="formData.longitude"
 					placeholder="请输入经度"></uni-easyinput>
 			</uni-forms-item>
 			<uni-forms-item name="latitude" required label="纬度">
 				<uni-easyinput type="text" :inputBorder="true" v-model="formData.latitude"
 					placeholder="请输入纬度"></uni-easyinput>
 			</uni-forms-item>
 		</uni-forms>
 		<button type="primary" @click="submit('form')">提交</button>
 	</view>
 </template>

 <script>
 	import UploadImage from '@/common/component/UploadImage.vue';
 	import request from '@/util/request';
 	export default {
 		components: {
 			UploadImage
 		},
 		onLoad(options) {
 			this.clientStr = decodeURIComponent(options.client);
 			const client = JSON.parse(this.clientStr);
 			this.formData.id = client.id;
 			this.formData.name = client.name;
 			this.formData.address = client.address;
 			this.formData.photo = client.photo;
 			this.formData.logo = client.logo;
 			this.formData.state = client.state;
 			this.formData.pointMap = client.pointMap;
 			this.formData.explanation = client.explanation;
 			this.formData.linkman = client.linkman;
 			this.formData.dispatcher = client.dispatcher;
 			this.formData.dispatchSupervisor = client.dispatchSupervisor;
 			this.formData.receptionist = client.receptionist;
 			this.formData.teleLinkman = client.teleLinkman;
 			this.formData.teleDispatcher = client.teleDispatcher;
 			this.formData.teleDispatchSupervisor = client.teleDispatchSupervisor;
 			this.formData.teleReceptionist = client.teleReceptionist;
 			this.formData.longitude = client.longitude;
 			this.formData.latitude = client.latitude;
			this.initPhotoList()
 		},
 		data() {
 			return {
 				stateOptions: [{
 					value: '0',
 					text: '正常'
 				}, {
 					value: '1',
 					text: '冻结'
 				}, {
 					value: '2',
 					text: '暂停使用'
 				}],
 				logoList: [],
				clientPhotoList:[],
				pointMapList:[],
 				formData: {},
 				rules: {}
 			}
 		},
 		methods: {
			initPhotoList() {
				this.logoList = this.formData.logo ? this.formData.logo.split(',').map(url => {
					return {url}
				}) : [];
				this.clientPhotoList = this.formData.photo ? this.formData.photo.split(',').map(url => {
					return {url}
				}) : [];
				this.pointMapList = this.formData.pointMap ? this.formData.pointMap.split(',').map(url => {
					return {url}
				}) : [];
			},
 			handlePhoto() {
				this.logoList.forEach((item,index)=>{
					if(index==0){
						this.formData.logo=item.url
					}else{
						this.formData.logo+=","+item.url
					}
				})
				this.clientPhotoList.forEach((item,index)=>{
					if(index==0){
						this.formData.photo=item.url
					}else{
						this.formData.photo+=","+item.url
					}
				})
				this.pointMapList.forEach((item,index)=>{
					if(index==0){
						this.formData.pointMap=item.url
					}else{
						this.formData.pointMap+=","+item.url
					}
				})
 			},
 			submit(ref) {
				this.handlePhoto()
				console.log(this.formData);
 				this.$refs[ref].validateField([]).then(res => {
 					request.post("/client/edit", this.formData).then(res => {
 						if (res.code === '200') {
 							uni.showToast({
 								title: "编辑成功",
 								icon: 'success',
 								duration: 2000
 							});
 						} else {
 							uni.showToast({
 								title: "编辑失败",
 								icon: 'error',
 								duration: 2000
 							});
 						}
 					})
 				}).catch(err => {
 					console.log('err', err);
 				})
 			},

 			//重置表单 。原生的组件input组件不能重置表单
 			resetForm() {
 				this.$refs.form.resetFields()
 			},

 			clearValidate(form, name) {
 				if (!name) name = []
 				this.$refs[form].clearValidate(name)
 			}
 		}
 	}
 </script>
 <style scoped>
 	.container {
 		margin: 15px;
 	}

 	.uni-input-border {
 		padding: 0 10px;
 		height: 35px;
 		width: 100%;
 		font-size: 14px;
 		color: #666;
 		border: 1px #e5e5e5 solid;
 		border-radius: 5px;
 		box-sizing: border-box;
 	}
 </style>
